<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>数据抓取Flask</title>
	<link rel="stylesheet" href="/static/css/bootstrap.min.css">
	<script src="/static/js/jquery-1.10.2.min.js"></script>
	<script src="/static/js/layer/layer.js"></script>
	<script>
		function ajaxSetup(){
			$.ajaxSetup({
				beforeSend:function() {
					var ajaxLayerIndex = layer.load();
					layer.__ajaxLayerIndex = ajaxLayerIndex;
					$("#data-container").empty();
				},
				complete: function() {
					layer.close(layer.__ajaxLayerIndex);
				}
			});
		}

		$(function() {
			ajaxSetup();

			$("#btn-fetch").on("click", function() {
				$.get("/index/get_remote_data", function(ret_data){
					console.log(ret_data);
					if(ret_data) {
						var html = [];
						for(var i = 0; i < ret_data.results[0].goodsList.length; i++){
							var cur = ret_data.results[0].goodsList[i];
							html.push("<tr>");
							html.push("<td>" + cur["gasSourcesName"] + "</td>");
							html.push("<td>" + cur["companyName"] + "</td>");
							html.push("<td>" + cur["goodsRestrictedArea"] + "</td>");
							html.push("<td>" + cur["goodsDeliveryBegdate"] + 
								"至" + cur["goodsDeliveryEnddate"] + "</td>");
							html.push("<td>" + cur["goodsDeliveryCode"] + "</td>");
							html.push("<td>" + cur["goodsQuantity"] + "</td>");
							html.push("<td>" + cur["goodsGuidingPrice"] + "</td>");
							html.push("<td>" + cur["payMethod"] + "</td>");
							html.push("<td>" + cur["disburseType"] + "</td>");
							html.push("<td><button class='btn'>Modify</button></td>");

							html.push("</tr>");
						}

						$("#data-container").html(html.join(""));
					}
				});
			})
			
		})
	</script>
</head>
<body>
	
	<div class="container">
		<h1>数据抓取Flask</h1>
		<button id="btn-fetch" class="btn">抓取 <i class="glyphicon glyphicon-cog"></i></button>
		<hr/>
		<table class="table table-bordered table-striped table-hover">
			<thead>
				<tr>
					<th>气源地</th>
					<th>供应商名称</th>
					<th>限售区域</th>
					<th>供货日期</th>
					<th>配送方式</th>
					<th>供货数量（吨）</th>
					<th>出厂价（元/吨）</th>
					<th>付款方式</th>
					<th>支付方式</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="data-container"></tbody>
		</table>
	</div>
</body>
</html>